<template>
    <div>
        <!-- 登录头 -->
        <z-header class="header">登录</z-header> 
        <!-- 登录区域 -->
        <section class="page">
            <div class="login-page">
                <!-- 登录框 -->
                <div class="login-wrap">
                    <div class="login-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" v-model="username" type="text" class="login-username" placeholder="用户名/邮箱/已验证手机" />
                        <!-- 清空叉叉 -->
                        <i class="iconfont icon-close" data-close="username" v-show="!usernameClose" @click="clearText"></i>
                    </div>
                    <div class="login-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" ref="passwordText" v-model="password" type="password" class="login-password" placeholder="请输入密码" />
                        <div>
                            <i class="iconfont icon-close" data-close="password" v-show="!passwordClose" @click="clearText"></i>
                            <i class="iconfont icon-eye1 eye" @click="changeType" v-if="!passwordType"></i>
                            <i class="iconfont icon-eye eye" @click="changeType" v-else></i>
                            <router-link tag="span" to="./forget-password">忘记密码</router-link>
                        </div>
                    </div>
                </div>
                <!-- 错误提示 -->
                <div class="login-error">{{errMsg}}</div>
                <button class="login-button" :class="{'active' : username.trim()&&password.trim()}" @click="postLogin">登 录</button>
                <!-- 快捷导航 -->
                <div class="quick-nav">
                    <router-link tag="span" class="register-button" to="./register">快速注册</router-link>
                </div>
                <!-- 其他登录方式 -->
                <div class="other-login">
                    <div class="other-head">
                        <i></i>
                        <span>其它登录方式</span>
                        <i></i>
                    </div>
                    <div class="other-con">
                        <div class="login-icon"  @click="handQQ">
                            <i class="iconfont icon-tubiao215"></i>
                            <span>QQ</span>
                        </div>
                        <div class="login-icon">
                            <i class="iconfont icon-weixin1"></i>
                            <span>微信</span>
                        </div>
                    </div>
                    <p>登录即代表您已同意<a>知心购隐私政策</a></p>
                </div>
            </div>
        </section>
         <!-- <van-popup v-model="show" position="bottom" closeable close-icon-position="top-left" :style="{ height: '60%' }" > 
            <iframe src="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1" frameborder="0"  sandbox="allow-top-navigation" ></iframe>
        </van-popup> -->
        <!-- <van-dialog v-model="show" show-cancel-button>
                <iframe src="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1" frameborder="0" ></iframe>
        </van-dialog> -->
    </div>
</template>
<script>
import zHeader from '@/components/z-header.vue';
import {login,getUserInfo} from '@/http/index';
export default {
    components: {
        zHeader
    },
    data() {
        return {
            username: '',
            password: '',
            errMsg: '',
            //是否显示清空叉叉
            usernameClose: true,
            passwordClose: true,
            passwordType: 0,
            show:false
        }
    },
    methods: {
        focusText(e) {
            let $className = e.currentTarget.className
            $className === 'login-username' ? this.usernameClose = false : this.passwordClose = false
        },
        blurText(e) {
            let $className = e.currentTarget.className
            $className === 'login-username' ? this.usernameClose = true : this.passwordClose = true
        },
        clearText(e) {
            let $close = e.currentTarget.getAttribute('data-close')
            this[$close] = ''
        },
        changeType() {
            let $type = this.$refs.passwordText.getAttribute('type'),
                value = ''
            $type === 'password' ? value = 'text' : value = 'password'
            this.$refs.passwordText.setAttribute('type', value)
            this.passwordType = !this.passwordType
        },
        //发送登录请求
        postLogin() {
            if (!this.username.trim() || !this.password.trim()) {
                return
            }
            const params = {
                username: this.username,
                password: this.password
            }
            //解决登录完成之后直接进入`user`页面时无数据问题
            login(params).then(res => {
             
               if (res.status == 0) {
                   // 登录成功后立即获取用户信息并存储到store中，然后再进入user界面
                    localStorage.setItem('zxgToken', res.data.token)         
                    getUserInfo().then(res => {
                           console.log('已经登录了');
                        if (res.status != 0) return;
                        //更新存储用户数据
                        this.$store.commit('setUserInfo', res.data)
                        this.$nextTick(()=>{
                            //跳转到/user页面，并点击返回为上上个页面
                        this.$router.replace('/user').catch(err => {
                            console.log(err);
                        })
                        })
                        //获取购物车数据
                        this.$store.dispatch("getCartData");

                    })

                } else {
                    this.$toast(res.msg)
                    this.errMsg = res.msg
                }
            })
        },
        handQQ() {
         // &display=mobile
         // let url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1'
        //  this.show = true
        //  location.href="https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101850878&redirect_uri=http://localhost:8080/proxy&state=1"
         /*
            QQ SDK 提供的 授权方法
            新打开一个页面 进行授权
        */
      this.$QQ.Login.showPopup({
        appId: "101850878",
        // 授权完成跳转页面
        redirectURI: "http://localhost:8080/proxy",
      });
   }
        

    }
}
</script>
<style lang="scss"  scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/login';
</style>